<template>
  <div class="container">
    <Todoinput @add="addTodo"></Todoinput>
    <Todolist
      :Data="newData"
      @del="delTodo"
      @getFlag="handleGetFlag"
      :allCount="allCount"
      :completedCount="completedCount"
      :activeCount="activeCount"
    ></Todolist>
  </div>
</template>
<script setup>
import Todoinput from "./todoinput.vue";
import Todolist from "./todolist.vue";
import { ref, computed } from "vue";
let Data = ref([]);
let addTodo = (input) => {
  if (!input.value) {
    return;
  }
  let obj = {
    id: Math.random().toString(32).substring(2),
    todo: input.value,
    isCompleted: false,
  };
  Data.value.push(obj);
  input.value = "";
};
let delTodo = (index) => {
  Data.value.splice(index, 1);
};
let filterFlag = ref("all");
let handleGetFlag = (flag) => {
  filterFlag.value = flag;
};
let allCount = ref(0);
let completedCount = ref(0);
let activeCount = ref(0);
let newData = computed(() => {
  let all = Data.value;
  let completed = Data.value.filter((item) => item.isCompleted);
  let active = Data.value.filter((item) => !item.isCompleted);
  allCount = all.length;
  completedCount = completed.length;
  activeCount = active.length;
  switch (filterFlag.value) {
    case "all":
      return all;
    case "completed":
      return completed;
    case "active":
      return active;
  }
});
</script>
<style scoped></style>
